<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/base/base.css" >
</head>

<body>
    <ul class="layui-nav header-nav" lay-filter="">
        <li class="layui-nav-item">
            <a href="">logo</a>
        </li>
        <li class="layui-nav-item layui-this ">
            <a href="">文章管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="activity/active.html">活动管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="tea/tea.html">茶馆管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="collection/collection.html">藏家行情</a>
        </li>
        <li class="layui-nav-item">
            <a href="proprietary/proprietary.html">自营商品</a>
        </li>
        <li class="layui-nav-item">
            <a href="banner/banner.html">banner管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="sms/sms.html">短信模板</a>
        </li>
        <!-- 头部右侧 -->
        <div class="header-right">
            <div class="help">
                    <i class="layui-icon layui-icon-help ic-help" style="font-size: 6px; "></i>  
            </div>
            <li class="layui-nav-item">
                    
                <a href="">帮助</a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
            </li>
        </div>
    </ul>

    <!-- 面包屑 -->
    <div class="breadcrumb">
        <span class="layui-breadcrumb"lay-separator=">">
            <a href="">文章管理</a>
            <a href="" >全部文章</a>
          </span>
        </div>


  <!-- 中间内容区 -->
  <div class="container">  
      <div class="con-left fl">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">文章管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" class="layui-this">全部文章</a>
                        </dd>
                    </dl>
                </li>
            </ul>
      </div>
      <!-- 中间区域右侧 -->
      <div class="con-right fr">
          <!-- 上面文章标签选择区域 -->
          <div class="art-title">
              <span class="art-tag">文章标签：</span> 
              <input type="checkbox">新手
              <input type="checkbox">健康
              <input type="checkbox">财富
              <input type="checkbox">老茶客
              <button class="layui-btn layui-btn-radius layui-btn-normal search">搜索</button>
                 <a href="index/add-article.html" class="layui-btn-group art-add fr"> <i class="layui-icon icon-add">&#xe654;新增</i></a>
              
          </div>

          <!-- 列表区 -->
          <table class="layui-table art-table" lay-skin="line" lay-size="sm">
                <colgroup>
                  <col width="150">
                  <col width="200">
                  <col>
                </colgroup>
                <tbody>
                  <tr>
                    <td>绿茶知多少
                        <p>喝茶喝茶喝茶喝茶</p> 
                    </td>
                    <td>
                        <div class="classify">
                            <div class="circle"></div> 扫盲
                         </div>
                        <div class="circle"></div> 品鉴
                    </td>
                    <td>已上架</td>
                    <td>修改时间：2016-09-21  08:50:08</td>
                    <td class="article-edit">
                       <a href="index/index-edit.html" >编辑</a> 
                        <span class="separator"></span>
                       <a href="javascript:;">预览</a> 
                        <span class="separator"></span>
                       <a href="javascript:;" id="indel">删除</a> 
                    </td>
                  </tr>
               
                  <tr>
                        <td>绿茶知多少
                            <p>喝茶喝茶喝茶喝茶</p> 
                        </td>
                        <td>
                            <div class="classify">
                                <div class="circle"></div> 扫盲
                             </div>
                            <div class="circle"></div> 品鉴
                        </td>
                        <td>已上架</td>
                        <td>修改时间：2016-09-21  08:50:08</td>
                        <td class="article-edit">
                                <a href="javascript:;">编辑</a> 
                                 <span class="separator"></span>
                                <a href="javascript:;">预览</a> 
                                 <span class="separator"></span>
                                <a href="javascript:;">删除</a> 
                             </td>
                      </tr>
                      <tr>
                            <td>绿茶知多少
                                <p>喝茶喝茶喝茶喝茶</p> 
                            </td>
                            <td>
                                <div class="classify" >
                                    <div class="circle"></div> 扫盲
                                 </div>
                                <div class="circle"></div> 品鉴
                            </td>
                            <td>已上架</td>
                            <td>修改时间：2016-09-21  08:50:08</td>
                            <td class="article-edit">
                                    <a href="index/index-add.html" >编辑</a> 
                                     <span class="separator"></span>
                                    <a href="javascript:;">预览</a> 
                                     <span class="separator"></span>
                                    <a href="javascript:;" >删除</a> 
                                 </td>
                          </tr>
                </tbody>
              </table>
                <!-- 分页 -->
                  <div id="page"></div>
                   
              <!-- <div id="page" class="fr"></div> -->
              
      </div>
  </div>




    <script src="./static/lib/layui/layui.all.js"></script>
    <script src="./static/js/base.js"></script>
    <script>
            ;!function(){
              //无需再执行layui.use()方法加载模块，直接使用即可
              var form = layui.form
              ,layer = layui.layer;
               var indel =my('indel');
                indel.onclick=function(){
                    layer.confirm('您确定要删除这行内容吗？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        layer.msg('已删除', { icon: 1 });
                    }, function () {
                        layer.msg('已取消');
                    });
                }
        
              
            }();
            </script> 


    <script>
     layui.use(['laypage', 'layer'], function(){
     var laypage = layui.laypage
    ,layer = layui.layer;
  //完整功能
  laypage.render({
    elem: 'page'
    ,count: 50
    ,limit:3
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj){
      console.log(obj)
    }
  });
  

  
  //调用分页
//   laypage.render({
//     elem: 'demo20'
//     ,count: data.length
//     ,jump: function(obj){
//       //模拟渲染
//       document.getElementById('biuuu_city_list').innerHTML = function(){
//         var arr = []
//         ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
//         layui.each(thisData, function(index, item){
//           arr.push('<li>'+ item +'</li>');
//         });
//         return arr.join('');
//       }();
//     }
//   });
  
});
</script>



</body>

</html>